<!-- 商品分类 -->
<template>
  <div class="box">
    <div class="addBox-header">
      <div class="stateName">
        <div class="state">
          状态：
        </div>
        <el-select
          v-model="value"
          placeholder="全部"
          @change="changeStatus"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <div class="state">
          名称：
        </div>
        <el-input
          v-model="nameVal"
          placeholder="请输入名称"
          class="inputName"
        />
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="searchName()"
        />
      </div>
      <div class="addBtn">
        <el-button
          type="primary"
          @click="dialogFormVisible = true"
        >
          新增产品分类
        </el-button>

        <el-dialog
          title="创建产品分类"
          :visible.sync="dialogFormVisible"
        >
          <el-form
            ref="form"
            :model="form"
            :rules="rules"
          >
            <el-form-item
              label="分类名称"
              :label-width="formLabelWidth"
              prop="name"
            >
              <el-input
                v-model="form.name"
                autocomplete="off"
                placeholder="数码产品"
              />
            </el-form-item>
            <el-form-item
              label="父级"
              :label-width="formLabelWidth"
              prop="type"
            >
              <el-select
                v-model="form.type"
                placeholder="每日新品"
                class="fatherForm"
              >
                <el-option
                  label="每日新品"
                  value="每日新品"
                />
                <el-option
                  label="热门推荐"
                  value="热门推荐"
                />
              </el-select>
            </el-form-item>

            <div class="classifyIcon">
              分类图标<el-upload
                action="#"
                list-type="picture-card"
                :auto-upload="false"
              >
                <i
                  slot="default"
                  class="el-icon-plus"
                />
                <div
                  slot="file"
                  slot-scope="{ file }"
                >
                  <img
                    class="el-upload-list__item-thumbnail"
                    :src="file.url"
                    alt=""
                  >
                  <span class="el-upload-list__item-actions">
                    <span
                      class="el-upload-list__item-preview"
                      @click="handlePictureCardPreview(file)"
                    />
                    <span
                      v-if="!disabled"
                      class="el-upload-list__item-delete"
                      @click="handleDownload(file)"
                    />
                  </span>
                </div>
              </el-upload>
            </div>
            <div class="classifySort">
              <el-form-item
                label="排序"
                prop="shopSort"
              >
                <el-input-number
                  v-model="form.shopSort"
                  :min="1"
                  :max="10"
                  label="描述文字"
                />
              </el-form-item>
            </div>
            <p>
              <el-form-item
                label="状态"
                prop="stateFlag"
              >
                <el-switch
                  v-model="form.stateFlag"
                  active-color="blue"
                  inactive-color="#ccc"
                />
              </el-form-item>
            </p>
          </el-form>

          <div
            slot="footer"
            class="dialog-footer"
          >
            <el-button @click="dialogFormVisible = false">
              取 消
            </el-button>
            <el-button
              type="primary"
              @click="okAddProductClassify('form')"
            >
              确 定
            </el-button>
          </div>
        </el-dialog>
      </div>
    </div>
    <div class="addBox-main">
      <el-table
        :data="isShow === null ? tableData : isShow ? showDataT : showDataF"
        :default-sort="{ prop: 'shopSort', order: 'descending' }"
        style="width: 100%"
      >
        <el-table-column
          prop="name"
          label="名称"
          width="300"
        />
        <el-table-column
          prop="type"
          label="类型"
        />
        <el-table-column label="分类图标">
          <img
            class="imgs"
            src="../../../assets/img/6.jpg"
            alt=""
          >
        </el-table-column>
        <el-table-column
          prop="shopSort"
          sortable
          label="排序"
        />
        <el-table-column label="状态">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.stateFlag"
              active-color="blue"
              inactive-color="#ccc"
            />
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="360"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="dialogFormVisible = true"
            >
              添加子目录
            </el-button>
            <el-button
              type="text"
              size="small"
              @click="editClassifyShop(scope.row)"
            >
              编辑
            </el-button>
            <el-button
              type="text"
              size="small"
              @click="delClassifyShop(scope)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          layout="prev, pager, next"
          :page-size="pageSize"
          :total="total"
          @current-change="changePage"
        />
      </div>
    </div>

    <!--删除弹框  -->
    <el-dialog
      title="提示"
      :visible.sync="delDialogVisible"
      width="30%"
    >
      <span>确定删除此商品</span>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="delDialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="okDelShop"
        >确 定</el-button>
      </span>
    </el-dialog>

    <!-- 编辑弹框 -->
    <el-dialog
      title="编辑"
      :visible.sync="editDialogVisible"
      width="30%"
    >
      <div class="one">
        名称<el-input v-model="editInfo.name" />
      </div>
      <div class="one">
        类型<el-input v-model="editInfo.type" />
      </div>
      <div class="one">
        排序<el-input v-model="editInfo.shopSort" />
      </div>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="okEditShop"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { apiClassifyList } from "../../../api/classify";
export default {
  name: "Classify",
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      isShow: null,
      nameVal: "", //搜索名称
      options: [
        {
          value: "all",
          label: "全部"
        },
        {
          value: "show",
          label: "显示"
        },
        {
          value: "isShow",
          label: "不显示"
        }
      ],
      value: "",
      tableData: [], //表格数据
      showDataT: [],
      showDataF: [],
      delDialogVisible: false, //控制删除的弹框
      editDialogVisible: false, //控制编辑的弹框
      delVal: {}, //保存删除的值
      editInfo: {}, //保存编辑的
      //新增产品分类form
      form: {
        name: "",
        type: "", //父级名称
        stateFlag: false,
        shopSort: 1 //排序
      },
      rules: {
        name: [{ required: true, message: "必须输入", trigger: "blur" }]
      },
      formLabelWidth: "120px",
      dialogVisible: false, //弹框取消按钮
      dialogFormVisible: false, //控制新增产品分类的弹框
      addProductClassify: [], //保存新增产品分类的值
      pageSize: 6, //每页显示个数
      pageIndex: 1, //第一页,
      total: 0, //总条数
      dialogImageUrl: "",
      disabled: false
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  async created() {
    const res = await apiClassifyList({
      pageSize: this.pageSize,
      pageIndex: this.pageIndex
    });
    console.log(res, "数据");
    this.tableData = res.data;
    this.total = res.total;
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  //方法集合
  methods: {
    //搜索名称
    searchName() {
      console.log(this.nameVal, "111");
      let flag = this.tableData.filter(item => {
        return item.name.includes(this.nameVal);
      });
      this.tableData = flag;
    },
    //删除分类商品
    delClassifyShop(scope) {
      this.delVal = { ...scope.row };
      this.delDialogVisible = true;
    },
    //删除确定按钮 删除商品
    okDelShop() {
      this.delDialogVisible = false;
      this.tableData = this.tableData.filter(item => {
        return item.id !== this.delVal.id;
      });
    },
    //编辑
    editClassifyShop(scope) {
      this.editInfo = { ...scope };
      this.editDialogVisible = true;
    },
    //确定编辑
    okEditShop() {
      this.tableData.forEach((item, ind) => {
        if (item.id === this.editInfo.id) {
          this.$set(this.tableData, ind, this.editInfo);
          // item.name=this.editInfo.name
          // item.type=this.editInfo.type
          // item.shopSort=this.editInfo.shopSort
        }
      });
      this.editDialogVisible = false;
    },
    //上传图片
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
    },
    handleDownload(file) {
      console.log(file, 1);
    },
    //确定新增产品分类
    okAddProductClassify(form) {
      this.$refs[form].validate(valid => {
        if (valid) {
          this.dialogFormVisible = false;
          this.tableData.push({ ...this.form, id: Math.random() * 10000 });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //状态选择
    changeStatus(value) {
      if (value === "show") {
        this.isShow = true;
        this.showDataT = this.tableData.filter(item => {
          return item.stateFlag === true;
        });
      } else if (value === "isShow") {
        this.isShow = false;
        this.showDataF = this.tableData.filter(item => {
          return item.stateFlag === false;
        });
      } else if (value === "all") {
        this.isShow = null;
        // this.tableData = this.tableData;
      }
    },
    //分页
    async changePage(value) {
      // console.log(value,'value值')
      this.pageIndex = value;
      const res = await apiClassifyList({
        pageSize: this.pageSize,
        pageIndex: this.pageIndex
      });
      this.tableData = res.data;
      this.total = res.total;
    }
  }
};
</script>
<style lang="scss" scoped>
.box {
  margin: 20px;
  width: 100%;
  height: 100vh;
  background: #efefef;
  padding: 10px;
  display: flex;
  flex-direction: column;
  .addBox-header {
    display: flex;
    flex-direction: column;
    height: 110px;
    .stateName {
      display: flex;
      align-items: center;
      .state {
        width: 80px;
        padding-left: 5px;
      }
      .inputName {
        width: 200px;
      }
      .el-button--medium {
        background: #ccc;
        outline: 0;
        border: 0;
      }
    }
    .addBtn {
      margin: 10px;
      .classifyIcon {
        display: flex;
      }
      .classifySort {
        margin-top: 10px;
      }
      .fatherForm {
        width: 100%;
      }
    }
  }
  .addBox-main {
    flex: 1;
    overflow: auto;
    border-top: 1px solid #ccc;
    .imgs {
      width: 100px;
      height: 100px;
    }
  }
  .pagination {
    margin-top: 10px;
  }
}
</style>
